import React, {useEffect, useRef, useState} from 'react';
import {Button, Form, Input, message, Modal, Select, Space, Table, Tag, Upload} from "antd";
import {
    reqGetRoleList,
} from "../../../../api/backStage/backStageApi";





const RoleManage = () => {

    const [roleListData, setRoleListData] = useState([])
    const [form] = Form.useForm();

    const [editingUser, setEditingUser] = useState(false);
    const userFormRef = useRef()



    useEffect(() => {
        getRoleData()
    }, [])
    const getRoleData = async () => {
        const result = await reqGetRoleList()
        setRoleListData(result.data)
    }

    const columns = [
        {
            title: '序号',
            dataIndex: 'id',
            width: 70
        },
        {
            title: '权限名称',
            dataIndex: 'ps_name',
            key: 'ps_name',
            render: (text) => <span>{text}</span>,
        },
        {
            title: '路径',
            dataIndex: 'ps_api_path',
            key: 'ps_api_path',
        },
        {
            title: '权限等级',
            key: 'ps_level',
            dataIndex: 'ps_level',
            render: (_, record) => {
                if (record.ps_level == 0) {
                    return (
                        <Tag color="#67c23a" key={record.id}>
                            一级
                        </Tag>
                    );
                } else if (record.ps_level == 1) {
                    return (
                        <Tag color="#409EFF" key={record.id}>
                            二级
                        </Tag>
                    );
                } else if (record.ps_level == 2) {
                    return (
                        <Tag color="#e6a23c" key={record.id}>
                            三级
                        </Tag>
                    );
                }

            }
        },
    ]



    return (
        <div>
            <Table
                bordered
                columns={columns}
                dataSource={roleListData}
                pagination={false}
                rowKey={record => record.id}
            />
        </div>
    );
};

export default RoleManage;